<script setup lang="ts">
import { computed } from 'vue'
const props = withDefaults(
    defineProps<{
      data: any
      active: number
    }>(),
    {
      data: [],
      active: 0
    }
)
const active = computed(() => +props.active)

</script>

<template>
  <el-card>
    <el-steps direction="vertical" :space="120">
      <el-step v-for="(item, index) in props.data" :key="index" :title="item.title" >
        <template #icon>
          <img v-if="active > index" src="@/assets/agent/chat/checked.svg" alt="">
          <img v-else src="@/assets/agent/chat/check.svg" alt="">
        </template>
        <template #description>
          <div style="margin-bottom: 8px;">
            {{ item.description }}
          </div>
          <slot :name="item.slotName"></slot>
        </template>
      </el-step>
    </el-steps>
  </el-card>
</template>

<style scoped lang="scss">
:deep(.el-step__title.is-wait) {
  color: var(--el-text-color-primary);
}

:deep(.el-step__line) {
  border-left: 2px dashed #DFE0E3;
  background-color: transparent;
  top: 5px !important;
}
:deep(.el-step__title.is-wait)  {
  color: var(--el-text-color-primary);
  font-weight: bold;
}
</style>
